<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
	<div class="module-common-wrapped">
		<div class="module-common-content">
			<el-tabs v-model="activeName" class="demo-tabs">
				<!-- 1. 公告管理 -->
				<el-tab-pane label="公告管理" name="first">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-common-header">
								<div class="search-wrapped">
									<el-select v-model="department" placeholder="请选择部门" @change="getListByDepartment" style="width: 200px;">
										<el-option v-for="item in departmentData" :key="item" :label="item" :value="item" />
									</el-select>
									<el-radio-group v-model="radio" class="ml-4" @change="getMessageListByLevel">
										<el-radio label="一般" value="一般">一般</el-radio>
										<el-radio label="重要" value="重要">重要</el-radio>
										<el-radio label="必要" value="必要">必要</el-radio>
									</el-radio-group>
								</div>
								<div class="button-wrapped">
									<el-button type="primary" plain @click="getCompanyFirstPageList">全部公告</el-button>
									<el-button type="primary" @click="createMessage(1)">发布公告</el-button>
								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-common-table">
								<el-table :data="companyTableData" border style="width: 100%">
									<el-table-column type="index" width="50" :index="indexMethod"></el-table-column>
									<el-table-column prop="message_title" label="公告主题" width="200" />
									<el-table-column prop="message_category" label="类别" width="120" />
									<el-table-column prop="message_publish_department" label="发布部门" />
									<el-table-column prop="message_publish_name" label="发布人" />
									<el-table-column prop="message_receipt_object" label="接收对象" width="120" />
									<el-table-column prop="message_level" label="公告等级" />
									<el-table-column prop="message_publish_time" label="发布时间" width="120">
										<template #default="{row}">
											<div>{{row.message_publish_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="message_update_time" label="最新编辑时间" width="120">
										<template #default="{row}">
											<div>{{row.message_update_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="message_click_number" label="阅读人数" />
									<el-table-column label="操作" width="200" fixed="right">
										<template #default="{row}">
											<div>
												<el-button type="success" @click="editMessage(row)">编辑</el-button>
												<el-button type="danger" @click="deleteMessage(row)">删除</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.companyCurrentPage"  :total="paginationData.companyTotal"
								:page-count="paginationData.companyPageCount" @current-change="companyCurrentChange" layout="prev, pager, next" />
						</div>
					</div>
				</el-tab-pane>

				<!-- 2. 系统消息 -->
				<el-tab-pane label="系统消息" name="second">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-common-header">
								<div class="search-wrapped">
								</div>
								<div class="button-wrapped">
									<el-button type="primary" @click="createMessage(2)">发布系统消息</el-button>
								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-common-table">
								<el-table :data="systemTableData" border style="width: 100%">
									<el-table-column type="index" width="50" :index="indexMethodSystem"></el-table-column>
									<el-table-column prop="message_title" label="消息主题" />
									<el-table-column prop="message_publish_name" label="发布者" />
									<el-table-column prop="message_click_number" label="阅读人数" />
									<el-table-column prop="message_publish_time" label="发布时间" width="200">
										<template #default="{row}">
											<div>{{row.message_publish_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column label="操作" width="200" fixed="right">
										<template #default="{row}">
											<div>
												<el-button type="success" @click="editSystemMessage(row)">编辑</el-button>
												<el-button type="danger" @click="deleteMessage(row)">删除</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.systemCurrentPage" :pager-count="7" :total="paginationData.systemTotal" 
							   :page-count="paginationData.systemCount" @current-change="systemCurrentChange" layout="prev, pager, next" />
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>

	<createEditM ref="creM" @success="changeTwoPageList"></createEditM>
	<deleteM ref="delM" @success="changeTwoPageList"></deleteM>
</template>
 
<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import breadCrumb from '@/components/bread_crumb.vue';
	import { getDepartment } from '@/api/setting';
	import { bus } from "@/utils/mitt.js";
	import createEditM from '../components/create_edit.vue';
	import deleteM from '../components/delete.vue';
	import {
		searchMessageBydepartment,
		searchMessageByLevel,
		getCompanyMessageLength,
		getSystemMessageLength,
		returnCompanyListData,
		returnSystemListData,
	} from '@/api/message.js';

  const breadcrumb = ref()
	const item = ref({
		first: '消息管理',
		second: '消息列表'
	})
	const activeName = ref('first')  // tabs

	const indexMethod = (index:number) => { // index从0开始 
		if(paginationData.companyCurrentPage===1){
			return index+1
		}else{
			return (paginationData.companyCurrentPage-1) * 10 + (index+1)
		}
	}

	const indexMethodSystem = (index:number) => { // index从0开始 
		if(paginationData.systemCurrentPage===1){
			return index+1
		}else{
			return (paginationData.systemCurrentPage-1) * 10 + (index+1)
		}
	}

	// 部门数据
	const department = ref()
	const departmentData = ref([])
	const returnDepartment = async () => {
		const res = await getDepartment()
		departmentData.value = res.data
	}
	returnDepartment()

	// 根据部门进行筛选
	const getListByDepartment = async () =>{
		const res = await searchMessageBydepartment(department.value)
		companyTableData.value = res.data
	}

	// 根据消息等级进行筛选
	const radio = ref() 
	const getMessageListByLevel = async () =>{
		const res = await searchMessageByLevel(radio.value) 
		companyTableData.value = res.data
	}

	// 分页数据
	const paginationData = reactive({ 
		companyTotal: 1, // 公司公告总数 
		companyPageCount: 1, // 公司公告列表总页数 
		companyCurrentPage: 1, // 公司公告列表当前所处页数 
		systemTotal: 1,  // 系统消息总数 
		systemCount: 1, // 系统消息总页数 
		systemCurrentPage: 1, // 系统消息当前所处页数
	})

	const companyTableData = ref([])
	const systemTableData = ref([])

	// -----------------------------------------公司公告----------------------------------------
	// 默认获取公司公告列表第一页的数据
	const getCompanyFirstPageList = async () => {
		const res = await returnCompanyListData(1)
		companyTableData.value = res.data
		getCompanyListLength()
		paginationData.companyCurrentPage = paginationData.companyCurrentPage>0 ? paginationData.companyCurrentPage: 1
	}
	getCompanyFirstPageList()

	// 获取公司公告列表的页数
	const getCompanyListLength = async () => {
		const res = await getCompanyMessageLength()
		paginationData.companyTotal = res.data.length
		let len = Math.ceil(res.data.length / 10)
		paginationData.companyPageCount = len>0 ? len :1
	}
	getCompanyListLength()

  // 公司公告列表监听换页
	const companyCurrentChange = async (value: number) => { 
		paginationData.companyCurrentPage = value
		const res = await returnCompanyListData(paginationData.companyCurrentPage)
		companyTableData.value = res.data
	}

	// -----------------------------------------系统消息----------------------------------------
	// 默认获取系统消息第一页的数据
	const getSystemFirstPageList = async () => {
		const res = await returnSystemListData(1)
		systemTableData.value = res.data
		getSystemListLength()
		paginationData.systemCurrentPage = paginationData.systemCurrentPage>0 ? paginationData.systemCurrentPage: 1
	}
	getSystemFirstPageList()

	// 获取系统消息列表的页数
	const getSystemListLength = async () => {
		const res = await getSystemMessageLength()
		paginationData.systemTotal = res.data.length
		let len  =  Math.ceil(res.data.length / 10)
		paginationData.systemCount = len>0 ? len : 1
	}
	getSystemListLength()
	
	// 系统消息列表监听换页
	const systemCurrentChange = async (value: number) => { 
		paginationData.systemCurrentPage = value
		const res = await returnSystemListData(paginationData.systemCurrentPage)
		systemTableData.value = res.data
	}

	// -------------------------------------------------------------------------
	// 更新公司公告列表及系统消息列表的第一页数据
	const changeTwoPageList = () => {
		department.value = null
		radio.value = null
		getCompanyFirstPageList()
		getSystemFirstPageList()
	}

	// 发布公告
	const creM = ref()
	const createMessage = (id: number) => {
		bus.emit('createMessage', id)
		creM.value.open()
	}

	// 编辑公告
	const editMessage = (row: any) => {
		bus.emit('editMessage', row)
		creM.value.open()
	}

	const editSystemMessage = (row: any) => {
		bus.emit('editSystemMessage', row)
		creM.value.open()
	}

	// 删除公告
	const delM = ref()
	const deleteMessage = (row: any) => {
		bus.emit('deleteMessageId', row)
		delM.value.open()
	}

</script>
 
<style lang="scss" scoped>
	.el-radio-group {
		margin-left: 20px;
	}

	:deep(.el-table .cell) {
		font-weight: 400;
	}

	.el-radio-group {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    font-size: 0;
	}
</style>
